前兩天分別完成了書籍 API 和節目 API 的實作，
將前面學到的 Request、Response、JSON 等概念真正應用在自己建立的網頁中。

今天則進行最後一個 API 實作，
使用前面學習過的 Open-Meteo 天氣 API建立一個簡單的天氣查詢工具。
這次不再直接從 API 網址查看一大串 JSON，
而是讓自己的網頁取得 API 資料，再將需要的天氣資訊整理後顯示出來。

⸻

一、實作目標

這次實作的目標是製作一個簡單的「天氣查詢工具」。

使用者可以從網頁上的選單選擇地點，
目前設定了台北、台中和高雄三個地點，
選擇地點後按下「查詢天氣」，
程式就會根據該地點的座標向 Open-Meteo API 發送 Request。

API 回傳資料後JavaScript 會從 JSON 中取得目前的天氣資料，最後顯示在網頁上。

這次主要顯示三項資訊：

• 溫度
• 濕度
• 風速

整個流程可以整理成：
選擇地點 → 取得地點座標 → 建立 API Request → API 回傳 JSON → 取得天氣資料 → 顯示在網頁上

和前兩天的實作相比，
這次的搜尋方式不再是輸入關鍵字，
而是利用不同地點的緯度與經度取得對應的天氣資料。

⸻

二、建立天氣查詢網頁

這次同樣使用 HTML、CSS 和 JavaScript 三個部分建立網頁。
HTML 負責建立網頁的基本結構，包括標題、地點選單、查詢按鈕，以及顯示天氣結果的區域。
CSS 則負責調整網頁的版面，讓選單、按鈕和天氣資料比較容易閱讀。
JavaScript 則負責處理真正的 API 查詢。

當使用者選擇地點後，
程式會取得該地點對應的緯度和經度，再將這些資料放入 Open-Meteo API 的網址中。


【HTML 程式碼】
從 HTML 可以看到，這次使用下拉式選單提供三個地點，分別是台北、台中和高雄。

【CSS 程式碼】
CSS 則用來調整天氣查詢工具的基本版面，讓查詢介面和最後顯示的資料更加清楚。

【JavaScript 程式碼】

JavaScript 是這次實作最重要的部分。
程式會先取得使用者選擇的地點，
再取得對應的座標，接著使用 fetch() 向 Open-Meteo API 發送 Request。
取得 Response 後再使用 response.json() 將資料轉換成 JSON，
最後從 current 中取得目前的天氣資料。

⸻

三、第一次搜尋：台北

完成網頁後首先選擇「台北」進行測試。

前面查詢 Open-Meteo API 時，台北使用的座標為：
緯度：25.06151
經度：121.5194
這些座標會被程式加入 API Request 中，
讓 API 知道需要查詢哪一個位置的天氣。

查詢成功後網頁會將 API 回傳的資料整理成比較容易閱讀的形式，
顯示台北目前的溫度、濕度和風速。

【查詢台北的實際畫面】

可以看到原本 API Response 裡面的資料不需要自己一項一項尋找，
而是由程式直接挑出需要的欄位，再顯示在網頁上。

⸻

四、改變地點：台中與高雄

確認台北可以正常取得資料後，再測試其他兩個地點。

第二次選擇「台中」
台中使用的座標為：
緯度：24.147627
經度：120.70138
查詢後，網頁會取得台中的天氣資料。

【查詢台中的實際畫面】

接著再選擇「高雄」
高雄使用的座標為：
緯度：22.671352
經度：120.31185
同樣可以取得高雄的目前天氣資料。

【查詢高雄的實際畫面】

從這三次查詢可以看到，
雖然使用的是同一個 Open-Meteo API，
但只要查詢的地點不同，回傳的天氣資料也會跟著改變。

⸻

五、今次實作與前兩個 API不同之處

這次的天氣 API 和前兩天的書籍、節目 API，在操作方式上有一個比較明顯的不同。
書籍 API 和節目 API 都是使用搜尋關鍵字作為查詢條件，
而天氣 API 則是利用地點的緯度和經度作為查詢條件。

雖然三個 API 的資料內容完全不同，但基本概念其實是一樣的：
提供查詢條件 → 發送 Request → API 處理請求 → 回傳 Response → 從 JSON 取得需要的資料

透過這次實作也可以看到 API 不一定只能用「搜尋文字」來查詢資料，
不同 API 可以使用不同的 Parameter 或條件來取得需要的內容。

⸻

六、觀察實作後的發現

前面第一次直接使用天氣 API 時，
看到的 Response 裡有很多資料，
例如 latitude、longitude、timezone、current_units 和 current 等欄位。

當時主要是在觀察 JSON 的結構，知道不同欄位各自代表不同的資料。

到了今天實際製作查詢工具後，
則可以進一步發現實際做一個應用程式時，
並不需要把 API 回傳的所有資料都顯示出來。

例如這次只需要：
temperature_2m → 溫度
relative_humidity_2m → 濕度
wind_speed_10m → 風速
就可以做出一個基本的天氣查詢功能。

API 提供的資料可能很多，但實際應用時可以依照自己的需求選擇需要的部分。

⸻

七、總結

今天完成了第三個 API 小實作，使用 Open-Meteo 天氣 API 建立自己的天氣查詢工具。

這次實作選擇台北、台中和高雄三個地點進行測試，
透過不同地點的座標向 API 發送 Request，再從回傳的 JSON 中取得溫度、濕度和風速等資料。

到這裡，書籍、節目和天氣三種 API 都已經實際操作並完成小型的網頁實作。

從最開始認識 Web API，到後來學習 Request、Response、Parameter 和 JSON，再到最後真的使用 JavaScript 把 API 串接到自己的網頁中，這次的 30 天學習也逐漸從「了解 API 是什麼」變成「可以實際使用 API」。

下一篇將進行最後的總結，
整理這 30 天學習 Web API 的過程，以及從三個不同 API 的實作中得到的學習心得。